$nav-inner-bottom: 0.75rem
$searchbox-height: 24px

a
    color: #000000
    text-decoration: none
    
    &:hover,
    &:focus
        color: #000000
        text-decoration: none


.navbar-container
    background-image: url(../image/banner.png), linear-gradient(90deg, #FFF6E6 0%, #FEF6E7 100%)
    background-position: bottom right
    background-size: auto 100%
    background-repeat: no-repeat
    box-shadow: 3px 4px 8px 4px rgba(92,92,92,0.08)
    display: flex
    flex-direction: row !important
    flex-wrap: wrap!important
    position: sticky
    top: 0
    z-index: 1000
    
    .nav-head
        padding-top: 1.5rem
        padding-bottom: $nav-inner-bottom
        margin-left: 2rem
        margin-right: 2rem

    .navbar-title
        margin-bottom: 0.75rem
        font-size: 1.375rem
        font-weight: 700
        line-height: 1.875rem
        letter-spacing: 0

    .nav-head + .navbar-tab
        margin-left: 2.25rem


.navbar-tab
    display: flex


.navbar-ul
    flex-direction: row !important
    display: flex
    list-style: none
    margin-bottom: 0
    
    li + li
        margin-left: 6.25rem

    .navbar-item
        align-self: flex-end
        padding-bottom: $nav-inner-bottom
        position: relative
        font-weight: 400

        &.active
            font-weight: 600
    
            /* vertical active sign under tabs */
            .navbar-item-bottom
                content: " "
                position: absolute
                width: 100%
                bottom: 0
                height: 0.25rem
                background-color: #000000
                border-radius: 50vh

    &-link
        /* font-family: PingFangSC-Semibold */
        font-size: 1rem


.form-inline
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -ms-flex-align: center;
    align-items: center;


.searchbox
    width: 12.5rem
    height: $searchbox-height
    border: 1px solid #000000
    background-color: transparent
    position: relative
    margin: 0;
    border-radius: 50vh;

    &-input,
    &-button
        background-color: transparent
        border: none

    &-input,
    &-input:focus,
    &-input:active
        width: 10rem
        height: $searchbox-height - 2px
        color: #000000
        font-size: 0.75rem
        padding-top: 0.15rem
        padding-bottom: 0.25rem
        padding-left: 0.625rem
        padding-right: 0
        outline: 0

    &-button
        background-image: url(../icon/mag.svg)
        background-repeat: no-repeat
        background-size: initial
        width: 17px
        height: 17px
        position: absolute
        z-index: 1
        transform: translateY(-50%);
        top: 50%
        right: 0.5rem
